/**
 * 主题切换器组件
 * 提供主题类型切换、紧凑模式开关和主题颜色选择功能
 * 集成ThemeProvider的主题控制能力
 */
import React, { useCallback } from 'react';
import { Button, Switch, Select, ColorPicker, Space, Tooltip } from 'antd';
import { SunOutlined, MoonOutlined } from '@ant-design/icons';
import { useTheme } from '../ThemeProvider';
import { THEME_COLOR_OPTIONS } from '../../utils/themeUtils';

/**
 * 主题切换器组件实现
 * 提供用户界面切换应用主题设置
 * @returns React组件
 */
const ThemeSwitcher: React.FC = () => {
  const { themeSettings, updateThemeColor, toggleThemeType, toggleCompactMode } = useTheme();
  
  // 使用useCallback优化事件处理函数
  const handleThemeTypeToggle = useCallback(() => {
    try {
      toggleThemeType(themeSettings.themeType === 'light' ? 'dark' : 'light');
    } catch (error) {
      console.error('切换主题类型失败:', error);
    }
  }, [themeSettings.themeType, toggleThemeType]);
  
  const handleColorChange = useCallback((color: any) => {
    try {
      if (color && color.toHexString) {
        updateThemeColor(color.toHexString());
      }
    } catch (error) {
      console.error('修改主题颜色失败:', error);
    }
  }, [updateThemeColor]);
  
  const handleColorSelect = useCallback((value: string) => {
    try {
      updateThemeColor(value);
    } catch (error) {
      console.error('选择主题颜色失败:', error);
    }
  }, [updateThemeColor]);

  return (
    <div className="theme-switcher" data-testid="theme-switcher">
      <Space align="center" size="middle">
        {/* 主题类型切换 */}
        <Tooltip title={themeSettings.themeType === 'light' ? '切换到暗色主题' : '切换到亮色主题'}>
          <Button
            type="text"
            icon={themeSettings.themeType === 'light' ? <MoonOutlined /> : <SunOutlined />}
            onClick={handleThemeTypeToggle}
            className="theme-switch-btn"
            data-testid="theme-type-toggle"
          />
        </Tooltip>

        {/* 紧凑模式切换 */}
        <Tooltip title="切换紧凑模式">
          <Switch
            checked={themeSettings.useCompact}
            onChange={toggleCompactMode}
            size="small"
            className="compact-mode-switch"
            data-testid="compact-mode-switch"
          />
        </Tooltip>

        {/* 主题颜色选择 */}
        <Tooltip title="选择主题颜色">
          <ColorPicker
            value={themeSettings.colorPrimary}
            onChange={handleColorChange}
            showText
            size="small"
            className="theme-color-picker"
            data-testid="theme-color-picker"
          />
        </Tooltip>

        {/* 快速主题颜色选项 */}
        <Select
          value={themeSettings.colorPrimary}
          onChange={handleColorSelect}
          options={THEME_COLOR_OPTIONS}
          size="small"
          style={{ width: 100 }}
          className="theme-color-select"
          data-testid="theme-color-select"
        />
      </Space>
    </div>
  );
};

export default ThemeSwitcher;